<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<@cms_site id=siteId!'' >
		<@cms_channel id=businessId!'' >
			<meta name="keywords" content="${(site.keywords)!''},${(tag_bean.name)!''}" />
			<title>${(tag_bean.name)!''}</title>
		</@cms_channel>
		</@cms_site>
	    <link rel="stylesheet" href="${ctx}/css/wechat/phone.css" />
	    <link rel="stylesheet" href="${ctx}/css/wechat/style.css" />
	    <link rel="stylesheet" href="${ctx}/js/weui/css/jquery-weui.min.css" />
	    <link rel="stylesheet" href="${ctx}/js/weui/css/weui.min.css" />
	    <script type="text/javascript" src="${ctx}/js/wechat/jQuery.1.8.2.min.js" ></script>
	    <script type="text/javascript" src="${ctx}/js/wechat/height.js" ></script>
	    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" ></script>
	    <script type="text/javascript" src="${ctx}/js/weui/js/jquery-weui.min.js" ></script>
	    <script type="text/javascript" src="${ctx}/js/weui/js/city-picker.min.js" ></script>
	    <script type="text/javascript" src="${ctx}/js/jquery/jquery.form.js" ></script>
	    <script src="${ctx}/js/webuploader/webuploader.min.js"></script>
	    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
	    <link rel="stylesheet" type="text/css" href="${ctx}/js/webuploader/webuploader.css">
   	    <style>
	    	body{
	    		background: url(${ctx}/img/wechat/jyxc_bgimg.jpg);
	    		background-size: 100% 100%;
	    		background-repeat: no-repeat;
	    		background-position: center;
	    	}
	    	.linear-gradients{
	    		background-image: -webkit-gradient(linear,100% 100%, 100% 0%, from(#42C2FF), to(#15A9FE), color-stop(0.5,#2CB6FE));
	    	}
	    	.l-r-w-h{width: 10px;height: 10px;top: -9px;left: -6px;}
	    	ul li{margin-bottom: 9px;}
	    	.webuploader-pick,.webuploader-container{
	    		width:3.5rem;height:3.5rem;padding:0;text-align:center;background:white;display:inline-block;
	    		 -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; 
	    	}
	    </style>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="col12 l-ht0">
					<img src="${ctx}/img/wechat/jbpt_banner.jpg" class="per100" />
				</div>
			</div>
			<form id="submitForm" action="${ctx}/f/mp/${siteId!''}/${businessId!''}/comment/attach/update" method="post">
				<div class="row base">
					<div class="col12">
						<div class="overflow-h mt56">
							<div class="ht38 fl per40 tr pr16 font16 font-yahei font-b">
								<span class="font-red">*</span>举报类型
							</div>
							<div class="ht38 fl per60 pos-r">
								<input type="text" id="typeVal" value="违法乱纪举报" class="border-none font-6 ht18 font14" placeholder="请选择您要举报的项目类型" />
								<input type="hidden" name="type" id="typeValHide" value="违法乱纪举报" class="border-none font-6 ht18 font14" placeholder="请选择您要举报的项目类型" />
								<img src="${ctx}/img/wechat/yz_close.png" class="w-14 ht14 pos-a top4 right26 display-n" />
							</div>
							<div class="fr per60 border-b-f4f4f5 pb10 mt14 jblx">
								<ul id="typeList">
									<li class="ht24">
										<div class="ht24 border-l-1 pos-r">
											<div class="radius-circle border-ed455e pos-a l-r-w-h"></div>
											<div class="font-ed455e font12 pos-a per100 pl10 ht24 left0 -top12 text-ellipsis1">
												<span data="1">违法乱纪举报</span>
											</div>
										</div>
									</li>
									<li class="ht24">
										<div class="ht24 border-l-1 pos-r">
											<div class="radius-circle pos-a border l-r-w-h"></div>
											<div class="pos-a per100 font12 pl10 ht24 left0 -top12 font-9 text-ellipsis1">
												<span data="2">嫌疑人辨认举报</span>
											</div>
										</div>
									</li>
									<li class="ht24">
										<div class="ht24 border-l-1 pos-r">
											<div class="radius-circle border pos-a l-r-w-h"></div>
											<div class="pos-a per100 font12 pl10 ht24 left0 -top12 font-9 text-ellipsis1">
												<span data="3">无主物品失物认领举报</span>
											</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
						<div class="ht56">
							<div class="ht56 pt18 fl per40 tr pr16 font16 font-yahei font-b">
								<span class="font-red">*</span>举报对象
							</div>
							<div class="ht56 pt18 fl per60 border-b-f4f4f5 jbdx pos-r">
								<input type="text" maxlength="10" name="userName" id="informObj" class="border-none font-6 ht18 font14" placeholder="请填写您要举报的对象" />
								<img src="${ctx}/img/wechat/yz_close.png" class="w-14 ht14 pos-a top22 right26 display-n" />
							</div>
						</div>
						<div class="ht56">
							<div class="ht56 pt18 fl per40 tr pr16 font16 font-yahei font-b">
								<span class="font-red">*</span>举报日期
							</div>
							<div class="ht56 pt20 fl per60 border-b-f4f4f5 jbrq pos-r">
								<input type="text" name="createDate" id="informDate" class="border-none font-6 ht18 font14" placeholder="请输入时间 " style="padding-left: 0;" />
								<img src="${ctx}/img/wechat/yz_close.png" class="w-14 ht14 pos-a top22 right26 display-n" />
							</div>
						</div>
					</div>
				</div>
				<div class="row suggest display-n">
					<div class="col12">
						<div class="ht38 mt56">
							<div class="ht38 fl per40 tr pr16 font16 font-yahei font-b">
								<span class="font-red">*</span>举报内容
							</div>
							<div class="ht38 fl per60 border-b-f4f4f5 font-9 font14">
								<span class="msgCont">请在下面编辑您的举报内容</span>
								<img src="${ctx}/img/wechat/yz_close.png" class="w-14 ht14 pos-a top4 right26 display-n" />
							</div>
						</div>
						<div class="pl28 pr28 overflow-h mt24 pos-r">
							<div class="ht12 font-9 pos-a left30 top4 font14 l-ht12 tipMsg">
								请在这里编辑内容，限<span class="font-red">200</span>字
							</div>
							<textarea maxlength="200" name="content" id="informCont" class="border-none ht160 l-ht20 font14 border-b-f4f4f5 font-6 per100" style="resize: none;"></textarea>
						</div>
						<div class="pl26 pr26 overflow-h">
							<ul>
								<li class="fl per25 tc">
									<img src="${ctx}/img/wechat/xstg_tp.png" id="imgUpload" class="w-42 ht42" />
									<p class="mt0 mb0 font12">图片</p>
									<p class="mt0 mb0 display-n" id="imgUploadMsg" onclick="previewImg();" style="color: #007AFF;font-size: 12px;">点击查看</p>
								</li>
								<li class="fl per25 tc">
									<img src="${ctx}/img/wechat/xstg_yy.png" id="voiceUpload" data="start" class="w-42 ht42" />
									<p class="mt0 mb0 font12" id="voiceText">语音</p>
									<p class="mt0 mb0 display-n" id="voiceUploadMsg" onclick="previewVoice();" style="color: #007AFF;font-size: 12px;">点击试听</p>
								</li>
								<li class="fl per25 tc">
									<div id="filePicker">
										<img src="${ctx}/img/wechat/xstg_sp.png" class="w-42 ht42" />
									</div>
									<p class="mt0 mb0 font12">视频</p>
									<p class="mt0 mb0 display-n" id="videoUploadMsg" style="color: #007AFF;font-size: 12px;">点击播放</p>
								</li>
								<li class="fl per25 tc">
									<img src="${ctx}/img/wechat/xstg_wz.png" id="locationUpload" class="w-42 ht42" />
									<p class="mt0 mb0 font12">位置</p>
									<p class="mt4 mb0 display-n" id="locationUploadMsg" style="color: #007AFF;font-size: 12px;" onclick="previewLocation();">点击查看</p>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<input type="hidden" name="bak1" id="bak1">
				<input type="hidden" name="bak2" id="bak2">
				<input type="hidden" name="bak3" id="bak3">
				<input type="hidden" name="bak4" id="bak4">
			</form>
			<div class="row">
				<div class="col12 ht26 pl44 pr44 mt36 mb20 nextDiv">
					<div class="ht26 l-ht26 tc font-white per100 radius4 font-yahei btn linear-gradients next font12">下一步</div>
				</div>
				<div class="col12 ht26 pl44 pr44 per100 submit display-n mb26 mt30">
					<div class="overflow-h ht26 linear-gradients radius4">
						<div class="ht26 l-ht26 tc font-white per45 fl font-yahei btn upstep font12">上一步</div>
						<div class="ht26 l-ht26 tc per5 fl font12 font-9">|</div>
						<div class="ht26 l-ht26 tc font-white per45 fl font-yahei btn font12" onclick="submitForm();">提交</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	
	<script>
		/*调用jquery weui日期插件*/
		$("#informDate").datetimePicker({
			max:'${.now?string("yyyy-MM-dd")}'
		});
		
		$(function(){
			initClickHidenEven();//初始化页面的点击隐藏事件
			initWxConfig();//初始化微信配置信息
			
			var uploader = WebUploader.create({
			 	auto:true,
			    // 文件接收服务端。
			    server: '${ctx}/f/mp/${siteId!''}/${businessId!''}/file/upload',
			    // 选择文件的按钮。可选。
			    pick: '#filePicker',
			    accept:{
			    	title:'Video',
			    	extensions: '3gp,mp4,rmvb,mov,avi,m4v,wmv',
			    	mimeTypes: 'video/*,audio/*,application/*'
			    },
			    method:'POST'
			});
			
			uploader.on( 'uploadSuccess', function( file,response ) {
				 $("#bak4").val(JSON.stringify(response.data));
				 $("#videoUploadMsg").text("上传成功");
				 $("#videoUploadMsg").show();
			 });
			
		});
		
		/*提交表单数据*/
		function submitForm(){
			var informCont=$("#informCont").val();
			if(informCont==''){
				console.log("验证失败");
				$('.msgCont').text('举报内容不能为空').addClass('font-red');
				$('.msgCont').siblings().removeClass('display-n');
				return false;
			}else{
				$("#informDate").val($("#informDate").val()+":00");
				jQuery.post($('#submitForm').attr('action'), $('#submitForm').serialize(),function(_json) {
					if (_json.status == "success") {
						$.alert("提交成功", function() {
							 window.location = "${ctx}/f/mp/s_10007/h_10091";
						});
					} else {
						$.alert("提交失败", function() {
							  //点击确认后的回调函数
						});
					}
				});
				return false;
			}
		}
		
		function initClickHidenEven(){
			$('div.next').bind('click',function(){
				/*判断输入框不能为空*/
				var  informType=$("#typeVal").val();
				var  informObj=$("#informObj").val();
				var  informDate=$("#informDate").val();
				if(informType=='' || informType=='举报类型不能为空'){
					$('#typeVal').val('举报类型不能为空').addClass('font-red');
					$('#typeVal').siblings().removeClass('display-n');
				}else if(informObj=='' || informObj=='举报对象不能为空'){
					$('#informObj').val('举报对象不能为空').addClass('font-red');
					$('#informObj').siblings().removeClass('display-n');
				}else if(informDate=='' || informDate=='举报日期不能为空'){
					$('#informDate').val('举报日期不能为空').addClass('font-red');
					$('#informDate').siblings().removeClass('display-n');
				}else{
					
					$('div.base').hide();
					$('div.nextDiv').addClass('display-n');
					$('div.suggest').removeClass('display-n');
					$('div.submit').removeClass('display-n');
					$('div.bottom14').hide();
				}
			});
			
			/*清空为空提示*/
			$('input').focus(function(){
				if($(this).hasClass('font-red')){
					$('input').removeClass('font-red');
					$(this).val('');
					$('img.right26').addClass('display-n');
				}
			});
			$('textarea').focus(function(){
				if($('.msgCont').hasClass('font-red')){
					$('.msgCont').removeClass('font-red');
					$('.msgCont').text('请在下面编辑您的举报内容');
					$('img.right26').addClass('display-n');
				}
			});		
			
			/*点击上一步效果*/
			$('div.upstep').bind('click',function(){
				$('div.base').show();
				$('div.nextDiv').removeClass('display-n');
				$('div.suggest').addClass('display-n');
				$('div.submit').addClass('display-n');
				$('div.bottom14').show();
			});
			
			/*点击举报类型列表效果*/
			$('#typeList li .text-ellipsis1').bind('click',function(){
				var inputVal=$(this).find("span").attr("data");
				$(this).siblings().addClass('border-ed455e');
				$(this).addClass('font-ed455e');
				$(this).parent().parent().siblings().find('div.radius-circle').removeClass('border-ed455e').addClass('border');
				$(this).parent().parent().siblings().find('div.text-ellipsis1').removeClass('font-ed455e');
				$('#typeVal').val($(this).find("span").text());
				$('#typeValHide').val();
				$('#typeValHide').val(inputVal);
			});
			
			$('textarea').focus(function(){
				$('.tipMsg').hide();
			});
		}
		
		function initWxConfig(){
			<@wxJsapiConf>
				wx.config({
				    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				    appId: '${wxJsapiConf.appId!''}', // 必填，公众号的唯一标识
				    timestamp: ${(wxJsapiConf.timestamp)!0}, // 必填，生成签名的时间戳
				    nonceStr: '${(wxJsapiConf.nonceStr)!''}', // 必填，生成签名的随机串
				    signature: '${(wxJsapiConf.jsApiSignature)!''}',// 必填，签名，见附录1
				    jsApiList: ['chooseImage','previewImage','uploadImage','startRecord','stopRecord','onVoiceRecordEnd','playVoice','pauseVoice','stopVoice','onVoicePlayEnd','uploadVoice','openLocation','getLocation'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				});
			</@wxJsapiConf>
			
			
			wx.ready(wxReadyFunc);
			
			wx.error(wxErrorFunc);
		}
		
		var wxReadyFunc = function(){
			$("#imgUpload").click(uploadImg);//图片上传
			$("#voiceUpload").click(uploadVoice);//图片上传
			$("#locationUpload").click(uploadLocation);//图片上传
			
		}
		
		var localIds;
		var uploadImg = function(){
			wx.chooseImage({
			    count: 9, // 默认9
			    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
			    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
			    success: function (res) {
			        localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
			    	if(!!localIds && localIds.length>0){
			    		$("#imgUploadMsg").show();
			    		for (var i = 0; i < localIds.length; i++) {
							wx.uploadImage({
							    localId: localIds[i], // 需要上传的图片的本地ID，由chooseImage接口获得
							    isShowProgressTips: 1, // 默认为1，显示进度提示
							    success: function (res) {
							        var serverId = res.serverId; // 返回图片的服务器端ID
							        $("#bak1").val($("#bak1").val()+","+serverId);
							    }
							});
						}
			    	}else{
			    		$("#imgUploadMsg").hide();
			    	}
			    }
			});
		}
		
		var localIdVoice;
		var uploadVoice = function(){
			var opt = $(this).attr("data");
			if(opt == "start"){//开始录音
				$("#voiceText").text("暂停录音");
				$(this).attr("data","end");
				wx.startRecord();
			}else if(opt == "end"){//录音结束
				$("#voiceText").text("录音");
				$(this).attr("data","start");
				wx.stopRecord({
				    success: function (res) {
				        localIdVoice = res.localId;
				        $("#voiceUploadMsg").show();
				        wx.uploadVoice({
				            localId: localIdVoice, // 需要上传的音频的本地ID，由stopRecord接口获得
				            isShowProgressTips: 1, // 默认为1，显示进度提示
				            success: function (res) {
				                var serverId = res.serverId; // 返回音频的服务器端ID
				                $("#bak2").val(serverId);
				            }
				        });
				    }
				});
			}
		}
		
		var uploadLocation = function(){
			console.log("获取定位");
			wx.getLocation({
	            type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
	            success: function (res) {
	            	console.log("成功");
	                var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
	                var longitude = res.longitude ; // 经度，浮点数，范围为180 ~ -180。
	                var speed = res.speed; // 速度，以米/每秒计
	                var accuracy = res.accuracy; // 位置精度
	                getLocation(latitude,longitude);
	                
	            }
	        });
		}
		
		function getLocation(latitude,longitude){
		    var map = new BMap.Map("allmap");
		    var point = new BMap.Point(longitude,latitude);
		    var gc = new BMap.Geocoder();
		    gc.getLocation(point, function(rs){
		         var addComp = rs.address;
		         $("#bak3").val(addComp);
		         //$("#locationUploadMsg").text(addComp);
		         $("#locationUploadMsg").show();
		    });
		}
		
		function previewImg(){
			var currentImg = localIds[0];
			wx.previewImage({
			    current: currentImg, // 当前显示图片的http链接
			    urls: localIds // 需要预览的图片http链接列表
			});
		}
		
		function previewVoice(){
			wx.playVoice({
			    localId: localIdVoice // 需要播放的音频的本地ID，由stopRecord接口获得
			});
		}
		
		function previewLocation(){
			$.alert($("#bak3").val());
		}
		
		var wxErrorFunc = function(res){
			console.log(res);
		}
	</script>
	
</html>
